import d3 from 'd3'
import store from '../../../store/index.js'
export var selected = [''];
export default {
  frame () {
    (function() {
        document.onmousedown = function () {
			var selList = [];
			// getElementByTagName返回带有指定标签名的对象的集合
			var fileNodes = document.getElementsByTagName("circle");
			for(var i = 0; i < fileNodes.length; i++) {
				// 返回数组中某个指定的元素位置
				selList.push(fileNodes[i]);
			}
			var isSelect = true;
			// 获取事件触发后的event对象，做了一个兼容性处理
			var evt = window.event || arguments[0];
			// 存放鼠标点击初始位置
			var startX = (evt.x || evt.clientX);
			var startY = (evt.y || evt.clientY);
			if (startX <= document.documentElement.clientWidth / 2) {
				// 创建一个框选元素
				var selDiv = document.createElement("div");
				// 给框选元素添加CSS样式，使用决定定位
				selDiv.style.cssText = "position:absolute; width:0px; height:0px; font-size:0px; margin:0px; padding:0px; border:1px dashed #0099FF; z-index:1000; filter:alpha(opacity:60); opacity:0.6; display:none";
				// 添加ID
				selDiv.id = "selectDiv";
				// appendChild()向节点添加最后一个子节点
				document.body.appendChild(selDiv);
				// 根据起始位置，添加定位
				selDiv.style.left = startX + "px";
				selDiv.style.top = startY + "px";
				
				
				// 根据坐标给选框修改样式
				var _x = null;
				var _y = null;
				clearEventBubble(evt);
				// 移动鼠标
				document.onmousemove = function () {
					evt = window.event || arguments[0];
					if (isSelect) {
						if (selDiv.style.display == "none") {
						selDiv.style.display = "";
						}
						// 获取当前鼠标位置
						_x = (evt.x || evt.clientX);
						_y = (evt.y || evt.clientY);
						selDiv.style.left = Math.min(_x, startX) + 'px';
						selDiv.style.top = Math.min(_y, startY) + 'px';
						selDiv.style.width = Math.abs(_x - startX) + 'px';  //Math.abs()返回数的绝对值
						selDiv.style.height = Math.abs(_y - startY) + 'px';
						
						// *******************************************************************************
						// 获取参数
						var _l = selDiv.offsetLeft + store.state.offsetL;
						var _t = selDiv.offsetTop + store.state.offsetT;
						var _w = selDiv.offsetWidth;
						var _h = selDiv.offsetHeight;
								// console.log('x', _l +_w);
								// console.log('y', _t+_h);
						for(var i = 0; i < selList.length; i++) {
							var sl = selList[i].cx.baseVal.value + 60;
							var st = selList[i].cy.baseVal.value + 200;
							// console.log('x', sl)
							if (sl > _l && st > _t && sl < _l + _w && st < _t + _h) {
								// 该DOM元素被选中，进行处理
								if (selected.indexOf(selList[i].id) < 0) {
								selected[0] = selList[i].id;
								store.commit('setSelect', selList[i].id)
								selectChange();
								// console.log(selected);
								}
							} else {
								// if (selected.indexOf(selList[i].id) > -1) {
								// 	selected.splice(selected.indexOf(selList[i].id), 1);
								// // 	Vue.prototype.$selected = selected;
								// } else {
								// 	selected = []
								// }
							}
						}
					} 
					clearEventBubble(evt);
					}
						
					// 放开鼠标，选框消失
					document.onmouseup = function() {
						isSelect = false;
						if (selDiv) {
						document.body.removeChild(selDiv);
						}
						
						selList = null, _x = null, _y = null, selDiv = null, startX = null, startY = null, evt = null;
					}
			}
    
          
          }
        }) ();
    
    function clearEventBubble(evt) {
      // stopPropagation()不再派发事件。终止事件在传播过程的捕获、目标处理或起跑阶段进一步传播
      if (evt.stopPropagation)
        evt.stopPropagation();
      else
        evt.cancelBubble = true;  // 阻止该事件的进一步冒泡
      if (evt.preventDefault)
        evt.preventDefault();   // 取消事件的默认动作
      else
        evt.returnValue = false;
    }
     
    function selectChange() {
        if (selected.length > 0) {
            d3.selectAll(".dot")
                .attr('fill', (d, i) => {
                    // console.log(selected, i, selected.indexOf(i.toString()) > -1)
                    if (selected.indexOf('c'+i.toString()) > -1) {
                        // console.log(selected)
                        return 'black'
                    } else {
                        return "#FF0ab0"
                    }
                });
        }
    }

  }
}

export  const getSelect = () => {
	return selected;
}